<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" th:href="@{/icon/favicon.ico}">
    <link rel="stylesheet" th:href="@{/layuiadmin/layui/css/layui.css}" media="all">
    <style>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #009688;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {color:#009688;font-size:25px;font-weight:bold;}
        .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
        .login-form .layui-form-item {position:relative;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
        .captcha-img:hover{cursor: pointer}
        .captcha-img{cursor: pointer}
    </style>
</head>
<body>
<div class="layui-container layui-anim layui-anim-upbit">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                    <h1>电影后台管理系统</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" for="username"></label>
                    <input type="text" name="username" lay-verify="required|account" id="username" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" for="password"></label>
                    <input type="password" name="password" id="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode" for="captcha"></label>
                    <input type="text" name="code" id="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha">
                    <div class="captcha-img">
                        <img id="captchaPic" th:src="@{/verifyCode}">
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="remember" checked="" id="checked" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 陆</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script th:src="@{/layuiadmin/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuiadmin/js/jquery.particleground.min.js}" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jsencrypt/2.3.1/jsencrypt.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/node-forge@0.10.0/dist/forge.min.js"></script>
<script th:inline="javascript">
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        let cookies = document.cookie.split(';');
        function getKey(mKey) {
            for (let i = 0; i < cookies.length; i++) {
                let kv = cookies[i].split('=');
                if (kv[0].trim() === mKey){
                    return kv[1].trim();
                }
            }
            return '';
        }
        $(function () {
            let name = getKey('username');
            let pass = getKey('password');
            let remember = getKey('remember');
            if (remember === null) return;
            if (remember === 'true'){
                $('input[name="username"]').val(name);
                $('input[name="password"]').val(pass);
                $('#checked').attr('checked','checked');
            }
        });
        let msg = [[$,{msg}]];
        if (msg !== null && msg.length !== 0){
            layer.msg(msg,{
               icon : 5,
                time: 500
            });
        }
        function changeCodePic(){
            const pic = $('#captchaPic');
            let url = pic.attr('src') + '?' + 'time=' + new Date().getMilliseconds();
            pic.attr('src',url);
        }
        $('.captcha-img').on('click',function () {
            changeCodePic();
        });
        // 登录过期的时候，跳出ifram框架
        if (top.location !== self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#5cbdaa',
                lineColor:'#5cbdaa'
            });
        });
        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.username === '') {
                layer.msg('用户名不能为空', {
                    icon: 5,
                    offset: '15px'
                });
                return false;
            }
            if (data.password === '') {
                layer.msg('密码不能为空', {
                    icon: 5,
                    offset: '15px'
                });
                return false;
            }
            if (data.code === '') {
                layer.msg('验证码不能为空', {
                    icon: 5,
                    offset: '15px'
                });
                return false;
            }
            let  remembered;
            remembered = data.remember === 'on';
            $.ajax({
                type: 'GET',
                url: '/admin/getKey',
                success: function ($data) {
                    console.log($data);
                    let json;
                    if ((typeof $data === 'string') && $data.constructor === String){
                        json = JSON.parse($data);
                    }else{
                        json = $data;
                    }
                    if (json.code === 1){
                        const key = json.msg;
                        const pki = forge.pki;
                        // 规定格式：publicKey之前需要加'-----BEGIN PUBLIC KEY-----\n'，之后需要加'\n-----END PUBLIC KEY-----'
                        const publicK = pki.publicKeyFromPem('-----BEGIN PUBLIC KEY-----\n' + key + '\n-----END PUBLIC KEY-----');
                        // forge通过公钥加密后一般会是乱码格式，可进行base64编码操作再进行传输，相应的，后台获取到密文的密码后需要先进行base64解码操作再进行解密
                        const passwordCrypto =  forge.util.encode64(publicK.encrypt(data.password));
                        $.ajax({
                            type: 'POST',
                            url: '/admin/login',
                            data:
                                {
                                    'username' : data.username,
                                    'password' : passwordCrypto,
                                    'code' : data.code,
                                    'remember' : remembered,
                                    'publicKey': key
                                },
                            beforeSend: function(){
                                layer.msg('登陆中，请稍后...', {
                                    icon: 16
                                    ,shade: 0.01
                                });
                            },
                            success: function (data) {
                                layer.closeAll();
                                let json;
                                if ((typeof data === 'string') && data.constructor === String){
                                    if (data.charAt(0) === '<'){
                                        layer.msg('服务器异常,请稍后重试!',{
                                            icon : 5,
                                            offset : '15px'
                                        });
                                        return;
                                    }
                                    json = JSON.parse(data);
                                }else{
                                    json = data;
                                }
                                if (json.code === 0){
                                    let msg = json.msg;
                                    layer.msg(msg, {
                                        icon: 5,
                                        offset: '15px'
                                    });
                                    changeCodePic();
                                    $('.layui-btn.layui-btn-fluid').removeClass('layui-btn-disabled');
                                }else if (json.code === 1){
                                    layer.msg('登录成功',{
                                        icon : 6,
                                        offset: '15px',
                                        time: 1000
                                    },function () {
                                        location.href = '/admin/index.html';
                                    })
                                }
                            },
                            error: function () {
                                layer.msg('登录失败，请检查网络后重新尝试!');
                                changeCodePic();
                            }
                        })
                    }else{
                        layer.msg("未知的异常");
                        changeCodePic();
                    }
                },
                error: function () {
                    layer.msg('服务器异常',{
                        icon : 5,
                        offset: '15px'
                    });
                    $('.layui-btn.layui-btn-fluid').removeClass('layui-btn-disabled');
                }
            });
            return false;
        });
    });
</script>
</body>
</html>